<template>
  <div class="noticeBar-wrap">
    <div class="icon-wrap">
      <i class="iconfont icon-tongzhi-"></i>
    </div>
    <div class="swiper-box"
         v-if="list.length">
      <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide v-for="item of list"
                      :key="item.id">
          <div class="swiper-content">{{item.username}} {{item.amount}}</div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
  name: 'noticeBar',
  data () {
    return {
      swiperOption: {
        direction: 'vertical',
        loop: true,
        autoplay: true
      },
      list: []
    }
  },
  created () {
    this.getLender()
  },
  methods: {
    getLender () {
      const page = 1
      this.$api.person.lender({
        page
      })
        .then(this.getLenderSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getLenderSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        this.showLoading = false
        const data = res.data
        this.list = data.lender
        console.log(this.list)
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.noticeBar-wrap >>> .swiper-container
  width 100%
  height 72px

.noticeBar-wrap
  width 100%
  height 72px
  background rgba(255, 255, 255, 0.3)
  box-shadow 0px 5px 12px 0px rgba(47, 53, 66, 0.16)
  border-radius 24px
  padding-left 32px
  box-sizing border-box
  display flex
  align-items center
  overflow hidden

  .icon-wrap
    height 100%
    width 32px
    display flex
    align-items center
    justify-content center
    margin-right 25px

    i
      font-size $shop_name
      color rgba(255, 255, 255, 0.8)

  .swiper-box
    flex 1

  .swiper-content
    font-size $shop_name
    color rgba(255, 255, 255, 0.8)
    height 72px
    line-height 72px
</style>
